<%--
  @desc: 新闻列表
--%>
<%@ page contentType="text/html;charset=utf-8" language="java"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<!-- <link rel="stylesheet" type="text/css" href="<c:url value='/resource/weixin/css/global.css'/>"> -->
<link rel="stylesheet" type="text/css" href="<c:url value='/resource/weixin/css/iscroll.css'/>">
<script src="<c:url value='/resource/weixin/js/jquery-1.8.3.min.js'/>"></script>
<script src="<c:url value='/resource/weixin/js/iscroll.js'/>"></script>
 <link rel="stylesheet" type="text/css" href="<c:url value='/resource/weixin/css/global.css'/>">
<title>警务资讯</title>
</head>

<body>
	<div id="wrapper">
		<div id="scroller" class="new_bottom">
			<div id="pullDown">
				<span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
			</div>
			<ul id="news_list" class="new_ul"></ul>
			<div id="pullUp">
				<span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, page_Index = 1;
	
	$(function() {
		shownews(1);
	});

	function shownews(pageNo) {
		$.ajax({
			url : "<c:url value='/weixin/jwzx/bmsrv/list/84/'/>" + pageNo,
			type : 'GET',
			dataType : 'json',
			timeout : 1000,
			beforeSend : function() {
				$("#loading").show();
				$("#error").hide();
			},
			success : function succFunction(resp) {
				if (resp && resp.succ) {
					var json = resp.data.body.list;
					$.each(json, function(index, item) {
						var html = "";
						var title = item.title;
						var imgUrl = item.imgUrl;
						var summary = item.summary;
						var id = item.id;
						var href = "/api/news/" + id;
						html += "<li>" + "<a href=<c:url value='/weixin/newsDetail/"+id+"'/>>";
						html += "<img src='<c:url value='"+imgUrl+"'/>'width='80' height='70'>" + " <span class='new_title_p'>" + title + "</span>";
						html += "<span class='new_title'>" + summary + "</span>" + "</a></li>";
						$("#news_list").append(html);
					});
					if(myScroll != undefined)
						myScroll.refresh();
				} else {
					pullUpEl.className = '';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '无更多数据';
				}
			}
		});
	}
	
	function pullDownAction() {
		setTimeout(function() { // <-- Simulate network congestion, remove setTimeout from production!
			$("#news_list li").remove();
			page_Index = 1;
			shownews(1);
			pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
		}, 100); // <-- Simulate network congestion, remove setTimeout from production!
	}

	function pullUpAction() {
		page_Index++;
		setTimeout(function() { // <-- Simulate network congestion, remove setTimeout from production!
			shownews(page_Index);
		}, 100); // <-- Simulate network congestion, remove setTimeout from production!
	}

	function loaded() {
		pullDownEl = document.getElementById('pullDown');
		pullDownOffset = pullDownEl.offsetHeight;
		pullUpEl = document.getElementById('pullUp');
		pullUpOffset = pullUpEl.offsetHeight;

		myScroll = new iScroll('wrapper', {
			useTransition : true,
			topOffset : pullDownOffset,
			onRefresh : function() {
				if (pullDownEl.className.match('loading')) {
					pullDownEl.className = '';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
				} else if (pullUpEl.className.match('loading')) {
					pullUpEl.className = '';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
				}
			},
			onScrollMove : function() {
				if (this.y > 5 && !pullDownEl.className.match('flip')) {
					pullDownEl.className = 'flip';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手后刷新...';
					this.minScrollY = 0;
				} else if (this.y < 5 && pullDownEl.className.match('flip')) {
					pullDownEl.className = '';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
					this.minScrollY = -pullDownOffset;
				} else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
					pullUpEl.className = 'flip';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手后刷新...';
					this.maxScrollY = this.maxScrollY;
				} else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
					pullUpEl.className = '';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
					this.maxScrollY = pullUpOffset;
				}
			},
			onScrollEnd : function() {
				if (pullDownEl.className.match('flip')) {
					pullDownEl.className = 'loading';
					pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
					pullDownAction(); // Execute custom function (ajax call?)
				} else if (pullUpEl.className.match('flip')) {
					pullUpEl.className = 'loading';
					pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
					pullUpAction(); // Execute custom function (ajax call?)
				}
			}
		});
		setTimeout(function() {
			document.getElementById('wrapper').style.left = '0';
		}, 800);
	}

	document.addEventListener('touchmove', function(e) {
		e.preventDefault();
	}, false);
	
	document.addEventListener('DOMContentLoaded', function() {
		setTimeout(loaded, 100);
	}, false);
</script>
</html>
